<template>
  <div class="app-container setting">
    <div class="content">
      <div class="content-item">
        <span class="item-label">昵称</span>
        <span class="item-name" v-html="name"></span>
        <el-button type="text" @click="dialogVisible = true">修改昵称</el-button>
      </div>
      <div class="content-item">
        <span class="item-label">性别</span>
        <el-radio v-model="sex" label="1">男</el-radio>
        <el-radio v-model="sex" label="2">女</el-radio>
      </div>
      <div class="content-item">
        <span class="item-label">生日</span>
        <el-date-picker v-model="birthDay" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="content-item">
        <span class="item-label">地区</span>
        <el-select v-model="cityValue" placeholder="请选择" @change="choseCity">
          <el-option v-for="item in city" :key="item.cicode" :label="item.ciname" :value="item.cicode">
          </el-option>
        </el-select>
        <el-select v-model="countyValue" placeholder="请选择">
          <el-option v-for="item in county" :key="item.cocode" :label="item.coname" :value="item.cocode">
          </el-option>
        </el-select>
      </div>
      <div class="content-item">
        <span class="item-label">简介</span>
        <el-input type="textarea" :rows="6" maxlength='300' v-model="describ" placeholder="简单的描述一下自己"></el-input>
      </div>
      <div style="text-align:right">{{computedCharLen}}</div>
      <div class="content-item btn">
        <el-button type="primary" @click="set" round>保存</el-button>
      </div>
      <el-dialog title="修改昵称" center :visible.sync="dialogVisible" width="35%">
        <el-input v-model="subName" placeholder="请输入昵称"></el-input>
        <span slot="footer" class="dialog-footer">
          <span class="btn">
            <el-button type="primary" @click="changeName" round>修改</el-button>
            <el-button type="primary" @click="dialogVisible = false" round>取消</el-button>
          </span>

        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { jSJson, updateWebUserhead, selectUserhead } from "@/api/index";
export default {
  data() {
    return {
      name: "",
      sex: "1",
      birthDay: "",
      input: "",
      dialogVisible: false,
      describ: "",
      city: [],
      county: [],
      cityValue: "",
      countyValue: "",
      subName: ""
    };
  },
  components: {},
  computed: {
  // 获取字符的个数
  computedCharLen() {
    try{
      if(this.describ.length){
        return 300 - this.describ.length
      }
    }catch(err){
      return 300
    }
    
    },
  },
  created() {
    jSJson("static/json/jiangsu.json").then(res => {
      this.city = res.data.city;
      console.log(res.data.city);
    });
    this.info();
    this.subName = this.name;
  },
  watch: {
    countyValue() {
      this.city.forEach(item => {
        if (item.cicode == this.cityValue) {
          this.county = item.county;
        }
      });
    }
  },
  methods: {
    changeName() {
      this.name = this.subName;
      this.dialogVisible = false;
      updateWebUserhead(
        this.name,
        this.sex,
        this.birthDay,
        this.cityValue,
        this.countyValue,
        this.describ
      ).then(res => {
        console.log(res.data);
        this.$message({
          showClose: true,
          message: res.data.errorMsg,
          type: "success"
        });
        this.info();
      });
      // this.$message({
      //   showClose: true,
      //   message: "恭喜你，修改成功",
      //   type: "success"
      // });
    },
    choseCity() {
      // console.log(this.cityValue)
      this.city.forEach(item => {
        if (item.cicode == this.cityValue) {
          this.county = item.county;
        }
      });
      this.countyValue = this.county[0].cocode;
    },
    info() {
      selectUserhead().then(res => {
        console.log(res.data);
        let userInfo = res.data.date;
        this.$store.commit("SET_USERINFO", userInfo);
        this.name = userInfo.userName;
        this.cityValue = userInfo.cityCode;
        this.countyValue = userInfo.areaCode;
        this.birthDay = userInfo.birthDay;
        this.sex = userInfo.sex;
        this.describ = userInfo.describ;
      });
    },
    set() {
      updateWebUserhead(
        this.name,
        this.sex,
        this.birthDay,
        this.cityValue,
        this.countyValue,
        this.describ
      ).then(res => {
        console.log(res.data);
        this.$message({
          showClose: true,
          message: res.data.errorMsg,
          type: "success"
        });
        this.info();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  padding: 24px 100px;
  .btn {
    .el-button {
      background-color: #15c798;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      padding: 0px 33px;
    }
    .el-button--primary:focus,
    .el-button--primary:hover {
      background-color: #15c798;
    }
    .el-button--primary {
      border-color: transparent;
    }
  }
  .content-item {
    font-size: 16px;
    padding: 15px 0;
    display: flex;
    align-items: center;
    .el-button--text {
      margin-left: 22px;
      font-size: 16px;
      color: #14d181;
      padding: 0px;
    }
    .item-label {
      color: #808080;
      margin-right: 34px;
      width: 50px;
    }
  }
  .content-item:nth-child(1) {
    padding-top: 0px;
  }
}
</style>
<style lang="less">
.custom-dz{
  .collect .content .el-tabs__item.is-active{
          color: #e93926;
  }
  .collect .content .el-tabs__active-bar {
    background-color: #e93926;
}
.collect .content .el-tabs__item:hover {
    color: #e93926;
}
.content .content-item .el-button--text{
    color: #e93926;
}
.content .btn .el-button{
  background-color: #e93926;
}

}
.setting {
  .el-dialog {
    border-radius: 10px;
    .el-dialog__header {
      border-bottom: 1px solid #c1c1c1;
      margin: 0 30px;
      .el-dialog__title {
        font-size: 24px;
        color: #000;
      }
    }
    .el-input__inner {
      border-radius: 20px;
    }
  }
  .el-radio__inner {
    width: 20px;
    height: 20px;
  }
  .el-radio__inner::after {
    width: 12px;
    height: 12px;
    background-color: #14d181;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #dcdfe6;
    background: #fff;
  }
  .el-radio__inner:hover {
    border-color: #14d181;
  }
  .el-radio__label {
    font-size: 16px;
    color: #000;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #000;
  }
  .el-textarea {
    width: 500px;
    height: 150px;
  }
  .el-textarea__inner::-webkit-scrollbar {
    display: none;
  }
}
</style>



